<template>
    <div class="">
        <!-- 添加弹窗 -->
        <el-dialog title="添加" :close-on-click-modal="false" v-model="dialogVisible" :before-close="handleClose"
            style="padding: 50px; width: 600px;;">
            <el-form :rules="addFormRules" label-width="auto">
                <el-form-item label="楼栋" prop="buildingid">
                    <BuildSelect @update="cascaderChange" v-model="addFrom.buildingid"></BuildSelect>
                </el-form-item>
                <el-form-item label="房间号" prop="buildingid">
                    <el-input v-model="addFrom.houseno" placeholder="请输入面积" style="width:120px" />
                </el-form-item>
                <el-form-item label="房屋面积" prop="buildingid">
                    <el-input v-model="addFrom.areas" placeholder="请输入面积" style="width:120px" />
                </el-form-item>
                <el-form-item label="房屋类型" prop="buildingid">
                    <el-select clearable v-model="type1" style="width:120px" placeholder="请选择状态">
                        <el-option v-for="item in 10" :label="item + '室'" :value="item + '室'" />
                    </el-select>
                    <el-select clearable v-model="type2" style="width:120px" placeholder="请选择状态">
                        <el-option v-for="item in 10" :label="item + '厅'" :value="item + '厅'" />
                    </el-select>
                </el-form-item>
                <el-form-item label="房屋朝向" prop="buildingid">
                    <el-select clearable v-model="addFrom.orientation" style="width:120px" placeholder="请选择状态">
                        <el-option label="朝东" value="朝东" />
                        <el-option label="朝西" value="朝西" />
                        <el-option label="朝南" value="朝南" />
                        <el-option label="朝北" value="朝北" />
                        <el-option label="东南" value="东南" />
                        <el-option label="西南" value="西南" />
                        <el-option label="东北" value="东北" />
                        <el-option label="西北" value="西北" />
                    </el-select>
                </el-form-item>


            </el-form>

            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="submitAdd">确认</el-button>
        </el-dialog>
    </div>
</template>

<script lang='ts' setup>
import { ref, reactive, onMounted } from "vue"
import BuildSelect from "./BuildSelect.vue";
import DateSelect from "./DateSelect.vue";
import { ElMessage } from 'element-plus'
import FeeAddHouse from "./FeeAddHouse.vue";
import {housesadd } from '../service/house/house'
import {addtype } from '../service/house/type'
 
const housedialogVisible = ref(false)

const buildType = ref()

const houses = ref()

const type1 = ref('')
const type2 = ref('')

const addFrom = reactive<addtype>({
    id:          0,
    buildingid:  0,
    houseno:     "",
    areas:       0,
    type:        "",
    orientation: "",
})

//添加
const submitAdd = async () => {
    addFrom.type=type1.value+type2.value
    let res: any = await housesadd(addFrom)
    if (res.errCode == 10000) {
        ElMessage.success(res.errMsg)
        emit('uptata', [])
        dialogVisible.value = false
    } else {
        ElMessage.error(res.errMsg)
    }
}

const porps= defineProps({
    addform: {
        type: [Object],
        default: () => ({})
    },
})

//添加页面显示
const dialogVisible = ref(true)
const emit = defineEmits(['close','uptata'])
const handleClose = () => {
    dialogVisible.value = false
    emit('close', [])
}
const houseClose = () => {
    housedialogVisible.value = false
}

//楼栋改变
const cascaderChange = (e: any) => {
    if (!e) addFrom.buildingid = null;
    else {
        addFrom.buildingid = e[e.length - 1];
    }
}


//表单验证
// 自定义表单验证
// const ruleFormRef = ref<FormInstance>()
// const validatePass = (rule: any, value: any, callback: any) => {
//     callback(new Error('请选择房间'))
// }
const addFormRules = reactive({
    // type: [{ required: true, message: '请输入费用类型', trigger: 'blur' }],
    // begindate: [{ required: true, message: '请输入开始时间', trigger: 'blur' }],
    // price: [{ required: true, message: '请输入费用金额', trigger: 'blur' }],
    // buildingid: [{ required: true, message: '请输入费用金额', trigger: 'blur' }],
    // buildType: [{ validator: validatePass, trigger: 'blur' }]
})

onMounted(() => {
    console.log(porps.addform);
    type1.value=porps.addform.type.slice(0,2)
    type2.value=porps.addform.type.slice(2,4)
    addFrom.buildingid=porps.addform.buildingid
    addFrom.areas=porps.addform.areas
    addFrom.orientation=porps.addform.orientation
    addFrom.houseno=porps.addform.houseno
})


</script>


<style scoped lang="less"></style>
